<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
          <el-button type="primary" size="small" @click="daochu">导出excel</el-button>
          <el-button type="primary" size="small" @click="addUser">新增员工</el-button>
        </template>
      </PageTools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="userList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" sortable />
          <el-table-column label="头像" prop="staffPhoto" width="120">
            <template #default="{ row }">
              <img :src="row.staffPhoto" style="border-radius: 50%; width: 100px; height: 100px; padding: 10px;">
            </template></el-table-column>
          <el-table-column label="手机号" prop="mobile" sortable />
          <el-table-column label="工号" prop="workNumber" sortable />
          <el-table-column label="聘用形式" sortable>
            <template #default="{ row }">
              {{ formatEmployment(row.formOfEmployment) }}
            </template></el-table-column>
          <el-table-column label="部门" prop="departmentName" sortable />
          <el-table-column label="入职时间" width="180" sortable>
            <template v-slot="{ row }">
              {{ row.timeOfEntry | dtformat }}
            </template></el-table-column>
          <el-table-column label="状态" prop="state" sortable>
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#ff4949"
                @change="chang($event,state)"
              />
            </template></el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="getdetail(row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="showDialog(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="query.page"
          :page-size="query.size"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <el-dialog
        class="assign-role"
        title="分配角色"
        :visible="showRoleDialog"
        @close="closeshowRoleDialog"
        @open="openDialog"
      >
        <!-- 这里准备复选框 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in rolelist"
            :key="item.id"
            :label="item.id"
          >
            {{ item.name }}</el-checkbox>

        </el-checkbox-group>
        <template #footer>
          <el-button size="small" @click="quxiao">取消</el-button>
          <el-button type="primary" size="small" @click="queding">确定</el-button>
        </template>
      </el-dialog>
    </div>
    <add-employee :visible="visible" @close-dialog="closeDialog" />
  </div>
</template>

<script>
import { getUserlist, deleteUser, putUserassignRoles, getUserinfo } from '@/api/Employee'
import { getSetlist } from '@/api/Setting'
import AddEmployee from './components/add-employee.vue'
import { getExportData } from '@/utils/excel'
export default {
  components: {
    AddEmployee
  },
  data() {
    return {
      userList: [{
        id: '',
        mobile: null,
        username: '',
        password: '',
        timeOfEntry: '',
        formOfEmployment: {},
        workNumber: null,
        correctionTime: '',
        departmentName: '',
        staffPhoto: ''
      }],
      query: {
        page: 1,
        size: 10
      },
      total: 0,
      visible: false,
      showRoleDialog: false,
      cid: null,
      rolelist: [],
      checkList: []
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const res = await getUserlist(this.query)
      this.userList = res.rows
      this.total = res.total
    },
    // 格式化聘用形式函数
    formatEmployment(type) {
      const map = {
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return map[type]
    },
    // 分页
    handleSizeChange(val) {
      this.query.size = val
      this.query.page = 1
      this.getlist()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getlist()
    },
    // 删除
    del(id) {
      this.$confirm('确认删除？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteUser(id)
        this.query.page = 1
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开新增页面
    addUser() {
      this.visible = true
    },
    // 关闭弹框
    closeDialog() {
      this.visible = false
    },
    daochu() {
      import('@/vendor/Export2Excel').then(async excel => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // const data = this.formatJson(filterVal, list)
        const res = await getUserlist(this.query)
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头 必填
          data: data, // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    getdetail(id) {
      this.$router.push({
        path: 'detail',
        query: {
          id
        }
      })
    },
    // 打开按钮
    async showDialog(id) {
      this.showRoleDialog = true
      this.cid = id
    },
    // close方法
    closeshowRoleDialog() {
      this.showRoleDialog = false
    },
    // open方法
    async openDialog() {
      const res = await getSetlist({
        page: 1,
        pagesize: 100
      })
      this.rolelist = res.rows
      // 回显分配员工信息
      const detail = await getUserinfo(this.cid)
      this.checkList = detail.roleIds
    },
    // 确定按钮
    async queding() {
      await putUserassignRoles({
        id: this.cid,
        roleIds: this.checkList
      })
      this.$message.success('分配成功')
      this.showRoleDialog = false
    },
    quxiao() {
      this.showRoleDialog = false
    }
  }

}
</script>
<style lang="scss" scoped>
.el-pagination{
  margin-top: 15px;
  margin-bottom: 45px;
  float: right;
}
</style>
